import React from 'react';

import { WhiteSpace } from 'antd-mobile';


import 'antd-mobile/dist/antd-mobile.css';
import './index.scss';

class Center extends React.Component {


  render() {

    // 我的地址
    const Icon = () => (
      <i className='iconfont icon icon-dizhi'></i>
    );

    const Address = () => (
      <div className='address text'>我的地址</div>
    );

    const Arrow = () => (
      <span className='arrow'>></span>
    );


    //金币商城
    const IconJb = () => (
      <i className='iconfont icon icon-shangcheng'></i>
    );

    const Jinbi = () => (
      <div className='jinbi text'>金币商城</div>
    );
    //分享
    const IconFx = () => (
      <i className='iconfont icon icon-lipintianchong'></i>
    );

    const Fengxiang = () => (
      <div className='fengxiang text'>分享拿10元现金</div>
    );

    //客服
    const IconKu = () => (
      <i className='iconfont icon icon-wodekefu'></i>
    );

    const Kefu = () => (
      <div className='jinbi text'>我的客服</div>
    );
    //下载
    const IconApp = () => (
      <i className='iconfont icon icon-changyonglogo40'></i>
    );

    const Xiazai = () => (
      <div className='fengxiang text'>下载饿了么App</div>
    );



    const MyAddress = ()=>(
      <div>
        <WhiteSpace size='lg' />
        <div className='dzl'>
        <Icon />
        <Address />
        <Arrow />
        </div>
      </div>
    )

    const MyJinbi = ()=>(
      <div>
        <WhiteSpace size='lg' />
        <div className='dzl'>
          <IconJb />
          <Jinbi />
          <Arrow />
        </div>
        <div className='dzl'>
          <IconFx />
          <Fengxiang />
          <Arrow />
        </div>
      </div>
    )

    const MyKefu = ()=>(
      <div>
        <WhiteSpace size='lg' />
        <div className='dzl'>
          <IconKu />
          <Kefu />
          <Arrow />
        </div>
        <div className='dzl'>
          <IconApp />
          <Xiazai />
          <Arrow />
        </div>
      </div>
    )

    return (
      <div className='container'>
        <div className='profile-3g0uv'>
          <div className='profile-pic'>
            <img src='' alt=''/>
          </div>
          <div className='profile-text'>
            <p>登录/注册</p>
            <p><i className='iconfont icon-shouji'></i><span>登录后享受更多特权</span></p>
          </div>
          <div className='profile-aow'>></div>
        </div>
        <div className='maininfo'>
          <ul>
            <li>
              <i className='iconfont icon-qian'></i>
              <span>钱包</span>
            </li>
            <li>
              <i className='iconfont icon-hongbao'></i>
              <span>红包</span>
            </li>
            <li>
              <i className='iconfont icon-jinbi'></i>
              <span>金币</span>
            </li>
          </ul>
        </div>
        <div className='profile'>
          <MyAddress />
          <MyJinbi />
          <MyKefu />
        </div>
      </div>
    )
  }
}

export default Center;